The Art of WebAssembly by Rick Battagline

Author:Rick Battagline [Rick Battagline]
Language: eng
Format: epub, azw3
Publisher: No Starch Press
Published: 2021-05-31T16:00:00+00:00

Collision Detection Function

In other sections, we’ve defined the WAT code before the JavaScript. In this section, the JavaScript initializes the values that define the circles in the array of structures. For that reason, we’ll be writing the JavaScript first in this section. When you’re doing collision detection between two circles, you use the Pythagorean theorem to determine whether the distance between the centers of your circles is greater than the sum of the circles’ radii. The WAT code in this section loops over each of the circles we’ve defined in the WebAssembly memory, comparing it to every other circle to see whether they collide. The details of collision detection aren’t the focus of this section, so we won’t go into it too deeply. It’s simply a means to demonstrate how you can separate your data into structures and use that data to perform computations with your WAT code.

The first portion of the WAT code defines the imports from the JavaScript. Listing 6-19 shows the beginning of the WAT module.

data_structures.wat (part 1 of 6)

(module (import "env" "mem" (memory 1)) 1 (global $obj_base_addr (import "env" "obj_base_addr") i32) 2 (global $obj_count (import "env" "obj_count") i32) 3 (global $obj_stride (import "env" "obj_stride") i32) ;; attribute offset locations 4 (global $x_offset (import "env" "x_offset") i32) 5 (global $y_offset (import "env" "y_offset") i32) 6 (global $radius_offset (import "env" "radius_offset") i32) 7 (global $collision_offset (import "env" "collision_offset") i32) ...

Listing 6-19: Importing global variables that define the data structure

The global variables passed into the WebAssembly module define the layout of the linear memory and the data structures within it. The $obj_base_addr 1 global variable is the location in memory where the circle structures are defined. The $obj_count 2 global variable is the number of circles defined in linear memory. The $obj_stride 3 global variable is the number of bytes between each of the circle definitions. Then we import values for each of the attributes. The $x_offset 4, $y_offset 5, $radius_offset 6, and $collision_offset 7 are the number of bytes between the start of the object’s x, y, radius, and collision flag values. These must be set inside this module.

Next, we’ll define the $collision_check function. The details of how this function works are only valuable if you’re interested in how circle collision detection works. But as an overview, it uses the Pythagorean theorem to determine whether the distance between two circles is less than the sum of the circle’s radii. To briefly explain, let’s label the radius of the first circle R1, the radius of the second circle R2, and the distance between the circles D, as shown in Figure 6-6. No collision occurs if R1 + R2 is less than D.

Figure 6-6: There is no collision if R1 + R2 is less than the distance between the circles.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.